/*
 * @Title: 
 * @Created by: ycq
 */
<template>
	<view class="">
		<view class="head">
			<view :style="{height:statusBarHeight}" class="uni-status-bar"></view>
			<view class="back" @click="back">
				<uni-icon type="arrowleft" class='back-img' size="22" color="#333333"></uni-icon>
			</view>
		</view>
		<view class="page-tip" :style="{'margin-top':statusBarHeight}">
			<text  class="page-tip-text"  @click="isAll=true" :class="isAll?'active':''">全部</text>
			<text class="page-tip-text" @click="isAll=false"  :class="!isAll?'active':''">最近关注</text>
		</view>
		<view class="care-list" :style="{'margin-top':statusBarHeight,'height':'calc(100vh - 80px -'+statusBarHeight+')'}">
			<view class="care-item" v-for='index in 8' :key='index'>
				<image class="care-item-img" src="/static/banner.png" mode=""></image>
				<text class="care-item-name">口红旗舰店</text>
				<view class="no-care">取消关注</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniIcon from '@/components/uni-icon/uni-icon'
	export default{
		data(){
			return{
				isAll:true,
				statusBarHeight:global.statusBarHeight + 'px',
			}
		},
		methods: {
			back(){
				uni.navigateBack({
					delta: 1
				});
			},
		},
		created(){
			
		},
		components: {
			uniIcon
		},
	}
</script>

<style scoped>
	.uni-status-bar {
		display: block;
		width: 100%;
		height: var(--status-bar-height);
		/* border:1upx solid blue */
	}
	.head{
		width: 750upx;
		height: 100upx;
	}
	.back{
		width: 100upx;
		height: 100upx;
	}
	.back-img{
		margin-left: 39upx;
		padding-top: 39upx;
	}
	.page-tip{
		width: 500upx;
		height: 50upx;
		margin-left: 125upx;
		margin-right: auto;
		display: flex;
		position: absolute;
		top: 50upx;
		flex-direction: row;
		justify-content: center;
	}
	.page-tip-text{
		font-size: 30upx;
		padding: 0 10upx;
		color: #999999;
		margin: 0 10upx;
	}
	.active {
		color: #5694FF;
		border-bottom:#5694FF solid 4upx ;
	}
	
	.care-list{
		width: 750upx;
		margin-top: 40upx;
		height: calc(100vh - 80px);
		overflow: scroll;
		/* margin-bottom: 40upx; */
	}
	.care-item{
		width: 750upx;
		height: 116upx;
		margin-top: 27upx;
		position: relative;
	}
	.care-item-img{
		width: 88upx;
		height: 88upx;
		margin-left: 25upx;
		float: left;
		border-radius: 50%;
	}
	.care-item-name{
		width: 569upx;
		height: 114upx;
		display: block;
		border-bottom: #D9D9D9 inset 1upx;
		margin-left: 36upx;
		font-size: 28upx;
		float: left;
		color: #333333;
		line-height: 80upx;
	}
	.no-care{
		width: 120upx;
		height: 40upx;
		font-size: 24upx;
		border-radius: 10upx;
		border: rgba(253,80,80,1.00) solid 1upx;
		color: rgba(253,80,80,1.00);
		text-align: center;
		line-height: 40upx;
		margin-top: 20upx;
		right: 45upx;
		position: absolute;
		
	}
</style>
